<script>
  import { onMount } from 'svelte';
  import { projectList, modelList, internet } from "$lib/store";
  import { createProject, fetchProjectList, getTokenUsage } from "$lib/api";

  let selectedProject = localStorage.getItem("selectedProject") || "Select Project";
  let selectedModel = localStorage.getItem("selectedModel") || "Select Model";
  let tokenUsage = 0;

  async function updateTokenUsage() {
    tokenUsage = await getTokenUsage();
  }

  function selectProject(project) {
    selectedProject = project;
    localStorage.setItem("selectedProject", project);
  }

  function selectModel(model) {
    selectedModel = `${model[0]} (${model[1]})`;
    localStorage.setItem("selectedModel", model[1]);
  }

  async function createNewProject() {
    const projectName = prompt("Enter the project name:");
    if (projectName) {
      await createProject(projectName);
      await fetchProjectList();
      selectProject(projectName);
    }
  }

  function closeDropdowns(event) {
    const projectDropdown = document.getElementById("project-dropdown");
    const modelDropdown = document.getElementById("model-dropdown");
    const projectButton = document.getElementById("project-button");
    const modelButton = document.getElementById("model-button");

    if (
      !projectDropdown.contains(event.target) &&
      !projectButton.contains(event.target)
    ) {
      projectDropdown.classList.add("hidden");
    }

    if (
      !modelDropdown.contains(event.target) &&
      !modelButton.contains(event.target)
    ) {
      modelDropdown.classList.add("hidden");
    }
  }

  onMount(() => {
    setInterval(updateTokenUsage, 1000);

    document
      .getElementById("project-button")
      .addEventListener("click", function () {
        const dropdown = document.getElementById("project-dropdown");
        dropdown.classList.toggle("hidden");
      });

    document
      .getElementById("model-button")
      .addEventListener("click", function () {
        const dropdown = document.getElementById("model-dropdown");
        dropdown.classList.toggle("hidden");
      });

    document.addEventListener("click", closeDropdowns);

    return () => {
      document.removeEventListener("click", closeDropdowns);
    };
  });
</script>

<div class="control-panel bg-slate-900 border border-indigo-700 rounded">
  <div class="dropdown-menu relative inline-block">
    <button
      type="button"
      class="inline-flex justify-center w-full gap-x-1.5 rounded-md bg-slate-900 px-3 py-2 text-sm font-semibold text-white shadow-sm ring-1 ring-inset ring-indigo-700 hover:bg-slate-800"
      id="project-button"
      aria-expanded="true"
      aria-haspopup="true"
    >
      <span id="selected-project">{selectedProject}</span>
      <svg
        class="-mr-1 h-5 w-5 text-gray-400"
        viewBox="0 0 20 20"
        fill="currentColor"
        aria-hidden="true"
      >
        <path
          fill-rule="evenodd"
          d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
          clip-rule="evenodd"
        />
      </svg>
    </button>
    <div
      id="project-dropdown"
      class="absolute left-0 z-10 mt-2 w-full origin-top-left rounded-md bg-slate-800 shadow-lg ring-1 ring-indigo-700 ring-opacity-5 focus:outline-none hidden"
      role="menu"
      aria-orientation="vertical"
      aria-labelledby="project-button"
      tabindex="-1"
    >
      <div class="py-1" role="none">
        <a
          href="#"
          class="text-white block px-4 py-2 text-sm hover:bg-slate-700"
          on:click|preventDefault={createNewProject}
        >
          + Create new project
        </a>
        {#if $projectList !== null}
          {#each $projectList as project}
            <a
              href="#"
              class="text-white block px-4 py-2 text-sm hover:bg-slate-700"
              on:click|preventDefault={() => selectProject(project)}
            >
              {project}
            </a>
          {/each}
        {/if}
      </div>
    </div>
  </div>

  <div
    class="right-controls"
    style="display: flex; align-items: center; gap: 20px"
  >
    <div class="flex items-center space-x-2">
      <span>Internet:</span>
      <div id="internet-status" class="internet-status" class:online={$internet} class:offline={!$internet}></div>
      <span id="internet-status-text"></span>
    </div>
    <div class="flex items-center space-x-2">
      <span>Token Usage:</span>
      <span id="token-count" class="token-count-animation">{tokenUsage}</span>
    </div>
    <div class="relative inline-block text-left">
      <div>
        <button
          type="button"
          class="inline-flex w-full justify-center gap-x-1.5 rounded-md bg-slate-900 px-3 py-2 text-sm font-semibold text-white shadow-sm ring-1 ring-inset ring-indigo-700 hover:bg-slate-800"
          id="model-button"
          aria-expanded="true"
          aria-haspopup="true"
        >
          <span id="selected-model">{selectedModel}</span>
          <svg
            class="-mr-1 h-5 w-5 text-gray-400"
            viewBox="0 0 20 20"
            fill="currentColor"
            aria-hidden="true"
          >
            <path
              fill-rule="evenodd"
              d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
              clip-rule="evenodd"
            />
          </svg>
        </button>
      </div>

      <div
        id="model-dropdown"
        class="absolute right-0 z-10 mt-2 w-full origin-top-right rounded-md bg-slate-800 shadow-lg ring-1 ring-indigo-700 ring-opacity-5 focus:outline-none hidden"
        role="menu"
        aria-orientation="vertical"
        aria-labelledby="model-button"
        tabindex="-1"
      >
        <div class="py-1" role="none">
          {#if $modelList !== null}
            {#each $modelList as model}
              <a
                href="#"
                class="text-white block px-4 py-2 text-sm hover:bg-slate-700"
                on:click|preventDefault={() => selectModel(model)}
              >
                {model[0]} ({model[1]})
              </a>
            {/each}
          {/if}
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  .internet-status {
    width: 12px;
    height: 12px;
    border-radius: 50%;
  }

  .online {
    background-color: #22c55e;
  }

  .offline {
    background-color: #ef4444;
  }

  @keyframes roll {
    0% {
      transform: translateY(-5%);
    }
    100% {
      transform: translateY(0);
    }
  }

  .token-count-animation {
    display: inline-block;
    animation: roll 0.5s ease-in-out;
  }

  .control-panel {
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
  }

  .control-panel > *:not(:first-child) {
    margin-left: 20px;
  }

  .right-controls > *:not(:last-child) {
    border-right: 1px solid #4b5563;
    padding-right: 20px;
  }
</style>